import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Button, Row, Col, message } from 'antd';
import IconFont from '@/components/IconFont';
import { CommonModal } from '@/pages/OrderModule/common/components/CommonModal';
import SubTitle from '@/pages/OrderModule/common/components/SubTitle';
import Typography from '@/pages/OrderModule/common/components/Typography';
import Style from './index.module.less';
import CommonLoading from '@/components/CommonLoading';
import { updateOrderStatus } from '../../utils/orderStatus';
import Api from '../../service';
/**
 * 智能合并订单弹窗
 */
const IntelligentMergeOrdersModal = (props) => {
	const { item, handleOk, handleCancel } = props;
	const { scene } = item;
	const [isOk, setIsOk] = useState(false);
	const [loading, setLoading] = useState(false);
	const [open, setOpen] = useState(false);
	const [previewData, setPreviewData] = useState({});
	const navigate = useNavigate();

	useEffect(() => {
		setOpen(true);
		getMergeOrderView();
	}, [])

	//获取预览信息
	const getMergeOrderView = async () => {
		setLoading(true);
		const { success, data } = await Api.autoMergeOrderView();
		if (success) {
			setPreviewData(data);
		}
		setLoading(false);
	}

	const onOk = () => {
		if(previewData.waitMergeOrderIdList && previewData.waitMergeOrderIdList.length > 0) {
			setLoading(true);
			updateOrderStatus(scene, {
				waitAutoMergeOrderIds: previewData.waitMergeOrderIdList,
			}, (val) => {
				setLoading(false);
				if (val) {
					setIsOk(true);
					setOpen(false);
				}
			})
		} else {
			message.info('当前不存在可以合并的订单');
		}
	}

	const onCancel = () => {
		setOpen(false);
	}

	const afterClose = () => {
		if (isOk) {
			handleOk(2)
		} else {
			handleCancel();
		}
	}

	//点击跳转
	const goMergeOrder = () => {
		setOpen(false);
		navigate('/views/order/rule?tab=0&tab2=2');
	}


	const modalFooter = [
		<Row justify="space-between">
			<Col>
				<Button type="link" onClick={goMergeOrder}>
					<IconFont type="iconsetting-select" />
					合单规则设置
				</Button>
			</Col>
			<Col>
				<Button onClick={onCancel}>取消</Button>
				<Button type="primary" loading={loading} onClick={onOk}>
					确认
				</Button>
			</Col>
		</Row>,
	];

	return (
		<CommonModal title={{ title: '智能合单' }} open={open} footer={modalFooter} afterClose={afterClose} width="528px" onCancel={onCancel}>
			<SubTitle title="合单条件" as="s2" symbol />
			<Row className={Style.intelligent_merge_orders_modal_info} gutter={[10, 10]}>
				<Col span={24}>
					<Typography as="s2">1、同一个平台、同一个店铺、同一个买家账号</Typography>
				</Col>
				<Col span={24}>
					<Typography as="s2">2、订单收货人、手机号、收货地址完全相同</Typography>
				</Col>
				<Col span={24}>
					<Typography as="s2">3、只限待审核和异常的订单可以合单</Typography>
				</Col>
			</Row>
			<SubTitle title="订单数" as="s2" symbol />
			<Row className={Style.intelligent_merge_orders_modal_info} gutter={[10, 10]}>
				<Col span={24}>
					<Typography as="s2">{`支持合并的订单数： ${previewData.beforeMergeNum || 0}`}</Typography>
				</Col>
				<Col span={24}>
					<Typography as="s2">{`合单后的订单数：${previewData.afterMergeNum || 0}`}</Typography>
				</Col>
			</Row>
			<CommonLoading loading={loading} />
		</CommonModal>
	);
};

export default IntelligentMergeOrdersModal;
